<template>
	<view class="bigBox">
		<view class="content"
			><view class="title">就诊卡详细信息</view>
			<view class="detailed">
				<view class="detailed_content">
					<view class="detailed_content_title">姓名：</view>
					<view class="content_item">{{ patientName }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">身份证号：</view>
					<view class="content_item">{{ patientIdcode }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">联系电话：</view>
					<view class="content_item">{{ patientTelephone }}</view>
				</view>
			</view>
			<view style="display: flex; justify-content: center">
				<view class="qrModal">
					<uqrcode ref="uqrcode"></uqrcode>
				</view>
			</view>
		</view>

		<view style="margin-top: 40rpx">
			<u-button type="error" @click="defaultCard">解绑该卡</u-button>
		</view>

		<view class="safe"></view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { unbindCard } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			dataList: {},
			// 当前卡id
			UserCardId: '',
			patientName: '',
			patientIdcode: '',
			patientTelephone: '',
		}
	},
	computed: {
		...mapState({
			userId: state => state.userId,
			orgId: state => state.orgId,
			// 卡id
			CardId: state => state.CardId,
		}),
	},
	onLoad(option) {
		console.log(JSON.parse(option.parameter), '测试测试')
		let parameter = JSON.parse(option.parameter)
		this.patientName = parameter.patientName
		this.patientIdcode = parameter.patientIdcode
		this.patientTelephone = parameter.patientTelephone
		this.$refs.uqrcode
			.make({
				size: 150,
				text: parameter.qrCode,
			})
			.then(res => {})
	},
	methods: {
		defaultCard() {
			console.log('解绑')
			unbindCard({
				userId: this.userId,
				orgId: this.orgId,
				cardId: this.CardId,
			}).then(({ data, head }) => {
				console.log(data, head)
				if (head.code == 200) {
					this.$refs.uToast.show({
						title: '解绑成功',
						type: 'success',
						url: '/pages/healthCard/index',
						duration: 1000,
					})
				} else {
					this.$refs.uToast.show({
						title: head.msg,
						type: 'error',
						duration: 1000,
					})
				}
			})
		},
	},
}
</script>

<style lang="scss">
page {
	background: rgb(236, 236, 236);
}
.bigBox {
	width: 100%;
	padding: 20rpx;

	.content {
		background: #fff;
		-moz-box-shadow: 2px 2px 5px #9c9c9c;
		-webkit-box-shadow: 2px 2px 5px #9c9c9c;
		box-shadow: 2px 2px 5px #9c9c9c;
		text-align: center;
		.title {
			font-size: 18px;
			padding: 10px;
			font-weight: bold;
		}
		.detailed {
			.detailed_content {
				display: flex;
				padding: 20px;
				.content_item {
					font-size: 32rpx;
				}
				.detailed_content_title {
					font-weight: bold;
					font-size: 30rpx;
					text-align: left;
					min-width: 180rpx;
					margin-right: 50rpx;
				}
			}
		}
	}
}
.qrModal {
	width: 150px;
	height: 150px;
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>